<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script> -->
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="http://cdn.staticfile.org/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
    <style>
    </style>
  </head>

  <body>
    <div id="code"></div>
    <button id="download">复制</button>
    <div class="text">21312321</div>
    <div id="codehidden" style="opacity: 0;position: absolute;"></div>
    <!-- <div id="codehidden"></div> -->
  </body>
  <script>
    $("#code").qrcode({
      render: 'canvas', //可选canvas或table
      width: 100,
      height: 100,
      text: 'https://segmentfault.com/q/1010000004173448' //需要生成二维码的内容
    })
    // 选中区域
    function getSelect (targetNode) {
        if (window.getSelection) {
            //chrome等主流浏览器
            var selection = window.getSelection();
            var range = document.createRange();
            range.selectNode(targetNode);
            selection.removeAllRanges();
            selection.addRange(range);
        } else if (document.body.createTextRange) {
            //ie
            var range = document.body.createTextRange();
            range.moveToElementText(targetNode);
            range.select();
        }
    }
    const clipboardHandler = (nodeName, event) => {
        event = event || nodeName; //不传参时
        const type = Object.prototype.toString.call(nodeName).replace(/\[object\s|\]/g, '');
        const target = event.target || event.srcElement;

        var result = false;
        switch (type) {
            case 'String':
            result = (target.nodeName.toLowerCase() === nodeName);
            break;
            case 'Array':
            result = nodeName.some(item => target.nodeName.toLowerCase() === item);
            break;
            case 'Object':
            nodeName = null;
            default:
            result = (target.nodeName === 'IMG');
        }

        if (result) {
            getSelect(target);
            document.execCommand('copy');
        }
    }
    $("#download").click(function() {
        console.log($("#code"))
        console.log($("#code").find("canvas")[0])
        let aaa = $("#code").find("canvas")[0].toDataURL("image/png")
        let canvas = document.createElement('canvas')
        canvas.width = 500
        canvas.height = 500
        let ctx = canvas.getContext('2d')
        let img = new Image()
    　　img.crossOrigin = 'Anonymous'
    　　img.src = aaa
        img.onload = function () {
            ctx.fillStyle = '#ccc'
            ctx.fillRect(0,0,500,500)
            ctx.drawImage(img, 200, 200, img.width, img.height)
            let base64 = canvas.toDataURL("image/png")
            var image = document.createElement("img")
            // image.src = 'https://smarttax-basic.oss-cn-shanghai.aliyuncs.com/prod/temp/seller/settlement/20191231/74269_%E5%9B%BE%E7%89%871%2811-02-14-44-43%29.png'
            // image.src = 'https://smarttax-basic.oss-cn-shanghai.aliyuncs.com/11.png'
            // image.src = 'http://img0.bdstatic.com/static/searchresult/img/logo-2X_b99594a.png'
            // image.src = 'http://smarttax-basic.oss-cn-shanghai.aliyuncs.com/11.png'
            image.src = 'http://smarttax-dev.oss-cn-shanghai.aliyuncs.com/test/temp/mobilecompany/mobilecompany/20200107/d65fd136-5cb5-4ef3-a3cb-380c760061a2.jpg'
            // image.src = 'http://587v5.com/static/yay.05eb60c6.jpg'
            // image.src = base64
            console.log(base64)
            $('#codehidden').html(image)
            // console.log($('#codehidden img')[0])
            image.onload = function (){
              console.log('加载完成')
              getSelect($('#codehidden img')[0])
                console.log('选择完成')
                document.execCommand('Copy')
                console.log('复制完成')
              // setTimeout(() => {
              //   getSelect($('#codehidden img')[0])
              //   console.log('选择完成')
              //   document.execCommand('Copy')
              //   console.log('复制完成')
              // }, 4000)
            }
            // getSelect($('#codehidden img')[0])
            // // getSelect($('.text')[0])
            // // console.log(window.getSelection())
            // document.execCommand('Copy')
            // console.log('复制完成')
            // var imgs = document.getElementById('codehidden').childNodes[0]
            // imgs.addEventListener('mouseenter', clipboardHandler)
            // var controlRange
            // if (document.body.createControlRange) { 
      //     controlRange = document.body.createControlRange()
            //     controlRange.addElement($('#codehidden img')[0])
            //     controlRange.execCommand('copy')
            // } 
            // window.getSelection().removeAllRanges()
            // document.addEventListener('copy', function(e) {
            //     var type = "image/png"
            //     e.clipboardData.setData('text/html', '<img src="' + base64 + '" />');
            //     e.preventDefault();
            // })
        }
        console.log(aaa)
    })
    
  </script>
</html>
